<?php Yaf\Loader::import(__DIR__.'/../head.phtml');?>
<el-main>
    <?php Yaf\Loader::import(__DIR__.'/../breadcrumb.phtml');?>
    <div class="table-list">
        <el-row :gutter="20">
            <el-col :span="6">
                <div class="grid-content bg-purple el-icon-user-solid" style="width: 90%; border-radius: 10px; background-color: #0e90d2; color: #ffffff; line-height: 50px; padding-left: 20px">
                    新增用户:30 ${$c}
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple el-icon-shopping-cart-1" style="width: 90%; border-radius: 10px; background-color: #0aba4c; color: #ffffff; line-height: 50px; padding-left: 20px">
                     新增订单:40
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple el-icon-chat-line-square" style="width: 90%; border-radius: 10px; background-color: #0c7cb5; color: #ffffff; line-height: 50px; padding-left: 20px">
                     新增咨询:50
                </div>
            </el-col>
            <el-col :span="6">
                <div class="grid-content bg-purple el-icon-postcard" style="width: 90%; border-radius: 10px; background-color: #cccc77; color: #ffffff; line-height: 50px; padding-left: 20px">
                     新增课程:20
                </div>
            </el-col>
        </el-row>
        <el-row :gutter="20" style="margin-top: 40px">
            <el-col :span="12">
                <div class="grid-content bg-purple">
                    <div id="order" style="height: 400px"></div>
                </div>
            </el-col>
            <el-col :span="12">
                <div class="grid-content bg-purple-light">
                    <div id="user" style="height: 400px"></div>
                </div>
            </el-col>
        </el-row>
    </div>
</el-main>
<?php Yaf\Loader::import(__DIR__.'/../foot.phtml');?>
<script>
    var vm = new Vue({
        el: '#app',
        data:{
        },
        methods: {

        }
    })
    var orderDom = document.getElementById("order");
    var orderChart = echarts.init(orderDom);
    orderOption = {
        title: {
            text: '订单柱形图',
            left: 'center',
            bottom:0
        },
        tooltip: {},
        legend: {
            data:['订单']
        },
        xAxis: {
            data: ["一月","二月","三月","四月","五月","六月","七月","八月","九月","十月","十一月","十二月"]
        },
        yAxis: {},
        series: [{
            name: '订单',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20,30,40,20,10,5,30]
        }]
    };
    if (orderOption && typeof orderOption === "object") {
        orderChart.setOption(orderOption, true);
    }
    var data = [["2000-06-05",116],["2000-06-06",129],["2000-06-07",135],["2000-06-08",86],["2000-06-09",73],["2000-06-10",85],["2000-06-11",73],["2000-06-12",68],["2000-06-13",92],["2000-06-14",130],["2000-06-15",245],["2000-06-16",139],["2000-06-17",115],["2000-06-18",111],["2000-06-19",309],["2000-06-20",206],["2000-06-21",137],["2000-06-22",128],["2000-06-23",85],["2000-06-24",94],["2000-06-25",71],["2000-06-26",106],["2000-06-27",84],["2000-06-28",93],["2000-06-29",85],["2000-06-30",73],["2000-07-01",83],["2000-07-02",125],["2000-07-03",107],["2000-07-04",82],["2000-07-05",44],["2000-07-06",72],["2000-07-07",106],["2000-07-08",107],["2000-07-09",66],["2000-07-10",91],["2000-07-11",92],["2000-07-12",113],["2000-07-13",107],["2000-07-14",131],["2000-07-15",111],["2000-07-16",64],["2000-07-17",69],["2000-07-18",88],["2000-07-19",77],["2000-07-20",83],["2000-07-21",111],["2000-07-22",57],["2000-07-23",55],["2000-07-24",60]];

    var dateList = data.map(function (item) {
        return item[0];
    });
    var valueList = data.map(function (item) {
        return item[1];
    });
    userOption = {
        title: {
            left: 'center',
            text: '用户增长折线图',
            bottom:0
        },
        tooltip: {
            trigger: 'axis'
        },
        xAxis: [{
            data: dateList
        }],
        yAxis: [{
            splitLine: {show: false}
        }],
        series: [{
            type: 'line',
            showSymbol: false,
            data: valueList
        }]
    };
    echarts.init(document.getElementById('user')).setOption(userOption);
</script>
